<style scoped>

</style>

<template>

<div>
  
  <Modal v-model="IsModalShow" title="SIM卡导入" :mask-closable="false" @on-cancel="cancel" width="680">
    <Row style="margin-bottom:20px;">
      <Button @click="downloadExcelTemplate" type="default" style="background-color:#fff"  size="large"  v-perms="'bss:sim:import'"
              icon="archive">导入模版
      </Button>
      <Upload 
              ref="upload"
               :headers="MyHeaders"
               :before-upload="beforeUpload"
               :on-success="handleSuccess"
               :format="['xls','xlsx']"
               :on-format-error="handleFormatError"
               :action="UploadAddress"
               class="float-r">
        <Button type="primary" size="large" :loading="IsUploading" icon="ios-cloud-upload-outline"  v-perms="'bss:sim:import'">导入SIM卡</Button>
      </Upload>
    </Row>

    <Row v-if="tableData.length>0">
      <Table stripe size="small"  :columns="tableColums" :data="tableData"></Table>
    </Row>
    <div slot="footer">
      <Button type="default"  @click="cancel" >关闭</Button>
    </div>
  </Modal>
</div>

</template>

<script>
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
export default {
    props:{
      modalShow:{
        type: Boolean,
        default: true,
      },
    },
    data() {
        return {
          IsModalShow:false,
          modalForm:{
          },
          modalForm_loading:false,
          tableColums: [
              {
                  align:'center',
                  title: '行号',
                  key: 'RowNum',
              },
              {
                  align:'center',
                  title: '关键字',
                  key: 'Keyword',
              },
              {
                  align:'center',
                  title: '原因',
                  key: 'Reason',
              }],
          tableData: [
          ],
          IsUploading:false,
        }
    },
    computed:{
        MyHeaders:function () {
            let myHeaders = {};
            let tokenValue = sessionStorage.getItem("token");
            if (tokenValue){
                myHeaders.token=tokenValue;
            }
            return myHeaders;
        },
        UploadAddress:function () {
            return baseUrl+'/bss/sim/import';
        },
    },
    watch:{
      modalShow(curVal,oldVal){
        this.IsModalShow = curVal;
        this.tableData=[];
        this.$refs['upload'].clearFiles();
      }
    },
    created(){

    },
    mounted(){
    },
    methods: {
      cancel() {
          if (!this.IsUploading){
              this.$emit('listenModalForm');
          }
      },
      beforeUpload(){
          this.IsUploading=true;
      },
      handleSuccess (res, file) {
          this.IsUploading=false;
          let result=res;
          if(res.code==0){
              this.$Message.success('上传成功！');
            //   if (res.lstResult){
            //       this.tableData=res.lstResult;
            //   }
              this.$emit('refreshTableList');
          }else{
            //   if (res.lstResult){
            //       this.tableData=res.lstResult;
            //   }
              this.$Message.error(res.msg);
          }

      },
      handleFormatError (file) {
          this.IsUploading=false;
          this.$Notice.warning({
              title: '文件格式不对',
              desc: '上传文件格式不正确，请上传xls或xlsx格式的excel'
          });
      },
      downloadExcelTemplate(){
          const url = baseUrl + "/files/sim.xlsx";
          window.open(url);
      },
    }
}

</script>
